<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="users" class="demo-form-inline">
        <el-form-item label="用戶ID" label-width="70px">
          <el-input clearable v-model="users.uId" placeholder="请输入用户Id"></el-input>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input clearable v-model="users.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="70px">
          <el-input clearable v-model="users.status" placeholder="请输入状态"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetUserVo">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getUserListByUser">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="showAdd">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示区域-->
      <el-table
        :data="userList"
        border
        ref="table"
        max-height="560"
        style="width: 100%;">
        <el-table-column type="expand" @expand-change="open">

          <template slot-scope="scope">
            <p v-if="scope.row.roleList.length==0">
              <span style="font-size: 30px;margin-left: 400px">添加</span>
              <el-button style="margin-left: 100px;width: 80px;height: 30px;" type="primary" size="mini" icon="el-icon-edit"
                         @click.native.prevent="showAddRole(scope.row.uId)"></el-button>
            </p>
            <p v-if="scope.row.roleList.length>0">
              <el-table :data="scope.row.roleList" border ref="table" show-overflow-tooltip align="center">
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleDesc" label="角色详情"></el-table-column>
                <el-table-column
                  width="300"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-edit"
                               @click.native.prevent="deleteRole(scope.row.rId)"></el-button>
                  </template>

                </el-table-column>

              </el-table>
            </p>
          </template>

        </el-table-column>
        <el-table-column
          prop="uId"
          label="员工编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="员工名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="imgUrl"
          label="精品图片"
          width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.imgUrl.length==0">
              请添加图像
            </p>
            <p v-if="scope.row.imgUrl">
              <el-popover placement="top-start" title="" trigger="hover">
                <img :src="scope.row.imgUrl" alt="" style="width: 150px;height: 120px">
                <img slot="reference" :src="scope.row.imgUrl" style="width: 50px;height: 50px;margin-left:25px">
              </el-popover>
            </p>

          </template>
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否禁用"
          width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status==1"
              active-color="#13ce66"
              inactive-color="#ff4949" @click.native.prevent="updateStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit"
                       @click.native.prevent="showUpdate(scope.row.uId)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       @click.native.prevent="deleteDepartment(scope.row.uId)"></el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit"
                       @click.native.prevent="showAddRole(scope.row.uId)"></el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <UserAdd :addVisible="addVisible" @changeShowAdd="showAdds" ref="addRef"></UserAdd>
      <UserUpdate :uId="userId" :updateVisible="updateVisible" @changeShowUpdate="showUpdates"
                  ref="updateRef"></UserUpdate>
      <AddRole :uId="userId" :addRoleVisible="addRoleVisible" @changeShowAddRole="showAddRoles"
                  ref="addRoleRef"></AddRole>
    </el-card>
  </div>


</template>

<script>
  import UserAdd from './UserAdd'
  import UserUpdate from "./UserUpdate";
  import AddRole from "./AddRole";

  export default {
    name: 'Users',
    data() {
      return {
        users: {
          uId: '',
          username: '',
          password: '',
          createDate: '',
          imgUrl: '',
          status: '',
          // roleList: 'undefined',
        },
        // 控制新增编辑弹窗的显示与隐藏
        addVisible: false,
        addRoleVisible: false,
        updateVisible: false,
        //用户集合
        userList: [],
        userId: '',
        //每页显示的条数
        size: 6,
        //总条数
        total: 100,
        //当前页码
        current: 1,
      }
    },
    components: {
      UserUpdate,
      UserAdd,
      AddRole,
    },
    created() {
      //创建组件的时候调用查询所有用户的方法
      this.getUserList()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将val赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getUserList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getUserList();
      },
      updateStatus(data) {
        this.users = data;
        console.log(data)
        if (data.status == 1) {
          this.users.status = 0;
        } else {
          this.users.status = 1;
        }

        // console.log(status+"-------"+id)
        console.log(this.users.status)
        this.$axios.put("/sys/users/" + data.uId, this.users).then((response) => {
          location.reload();
        });
      },
      async getUserList() {
        this.$axios.get('/sys/users/search/' + this.current + '/' + this.size, this.users).then((response) => {
          // console.log(response)
          this.userList = response.data.data.list;
          this.total = response.data.data.total;
        })
      },
      async getUserListByUser() {
        this.$axios.post('/sys/users/search/' + this.current + '/' + this.size, this.users).then((response) => {
          // console.log(response)
          this.userList = response.data.data.list;
          this.total = response.data.data.total;
        })
      },
      open() {
        console.log("==")
      },

      deleteRole(roleName){
        // eslint-disable-next-line no-unused-vars
        this.$axios.delete("/sys/users/role/"+roleName).then((response) => {
        });
        // console.log(roleName)
        location.reload()
      },
      async deleteDepartment(id) {
        // eslint-disable-next-line no-unused-vars
        this.$axios.delete("/sys/users/" + id).then((response) => {

        })
        location.reload();
      }
      ,
      //重置表单
      resetUserVo() {
        this.users.uId = '',
          this.users.username = '',
          this.users.password = '',
          this.users.createDate = '',
          this.users.status = '',
          this.getUserList()
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      showAdd() {
        this.addVisible = true
      },
      showUpdate(id) {
        this.updateVisible = true;
        this.userId = id;
        console.log("id=" + id);

      },
    showAddRole(id) {
      this.addRoleVisible = true;
      this.userId = id;
      console.log("id=" + id);

    },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAdds(data) {
        if (data === 'false') {
          this.addVisible = false
        } else {
          this.addVisible = true
        }
      },
      showUpdates(data) {
        if (data === 'false') {
          this.updateVisible = false
        } else {
          this.updateVisible = true
        }
      },
      showAddRoles(data) {
        if (data === 'false') {
          this.addRoleVisible = false
        } else {
          this.addRoleVisible = true
        }
      }
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
